<script setup lang="ts">
import { getWarningTodayPage } from '@/api/modules/alarm'
import type { WarningInfo } from '@/types'
import { renderState } from '@/mixins/Warning/MixinWarningList'

const tableData = ref([])
const pagination = reactive({
  pageNumber: 1,
  pageSize: 4,
  total: 0,
})

function render({ row }: { row: WarningInfo }) {
  return renderState(row)
}

function handlePageChange(pageNumber: number, pageSize: number) {
  getData(pageNumber, pageSize)
}

async function getData(pageNumber: number, pageSize: number) {
  try {
    const { data } = await getWarningTodayPage(pageNumber, pageSize)
    tableData.value = data.records || []
    pagination.total = data.total
  }
  catch (e) {}
}

onMounted(() => {
  getData(pagination.pageNumber, pagination.pageSize)
})
</script>

<template>
  <div class="alpha-block flex flex-col">
    <div class="flex items-center p-3">
      <span class="pl-2 line-height-none" style="border-left: 4px solid var(--el-color-primary);">今日告警信息</span>
      <div class="fs-14 ml-auto flex items-center">
        告警数量：{{ pagination.total }}
      </div>
    </div>
    <div class="flex-auto overflow-auto px-3">
      <ElTable
        :data="tableData" style="width: 100%" height="220px"
        stripe border :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :tooltip-options="{
          popperClass: 'max-w-300px',
        }"
      >
        <ElTableColumn label="告警类别" prop="warningCategoryName" />
        <ElTableColumn label="指标名称" prop="indicatorName" />
        <ElTableColumn label="指标编码" prop="indicatorNumber" />
        <ElTableColumn label="用能单元" prop="pointNameFull" />
        <ElTableColumn label="告警内容" prop="content" show-overflow-tooltip />
        <ElTableColumn label="告警状态" prop="state" width="100px">
          <template #default="scoped">
            <RenderComponent :render="render" :row="scoped.row" :column="scoped.column" :index="scoped.$index" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="告警开始时间" prop="time" width="180px" />
      </ElTable>
    </div>
    <div class="self-end px-3 pb-3">
      <ElPagination
        v-model:current-page="pagination.pageNumber" v-model:page-size="pagination.pageSize"
        layout="prev, pager, next"
        :total="pagination.total"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>
